<!--<template>-->
<!--  <view class="page">-->
<!--    <scroll-view class="scroll-view" scroll-y scroll-with-animation :scroll-top="top">-->
<!--      <view style="padding: 30rpx 30rpx 240rpx;">-->
<!--        <view class="message" :class="[item.userType]" v-for="(item,index) in list" :key="index">-->
<!--          <image :src="item.avatar" v-if="item.userType === 'friend'" class="avatar" mode="widthFix"></image>-->
<!--          <view class="content" v-if="item.messageType === 'image'">-->
<!--            <image :src="item.content" mode="widthFix"></image>-->
<!--          </view>-->
<!--          <view class="content" v-else>-->
<!--            {{ item.content }}-->
<!--          </view>-->
<!--          <image :src="item.avatar" v-if="item.userType === 'self'" class="avatar" mode="widthFix"></image>-->
<!--        </view>-->
<!--      </view>-->
<!--    </scroll-view>-->
<!--    <view class="tool">-->
<!--      <input type="text" v-model="content" class="input" @confirm="send" />-->
<!--      <button class="consult-button" @click="send">提交</button>-->
<!--&lt;!&ndash;      <button class="consult-button" @click="sendMessage">提交</button>&ndash;&gt;-->
<!--      <image src="/static/photo.png" mode="widthFix" class="thumb" @click="chooseImage"></image>-->
<!--    </view>-->
<!--  </view>-->
<!--</template>-->

<!--<script>-->
<!--import {historyInterrogation, launchInterrogation} from "@/api/websocket/websocket";-->
<!--import {getInfo} from "@/api/login";-->

<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      content: '',-->
<!--      list: [],-->
<!--      top: 0,-->
<!--      interrogation: {-->
<!--        id: null,-->
<!--        consultantId: null,-->
<!--        initiatorId: null,-->
<!--        doctorId: null-->
<!--      },-->
<!--      interrogationId: null,-->
<!--      doctorId: null,-->
<!--      user: {},-->
<!--      id: null-->
<!--    };-->
<!--  },-->
<!--  onLoad(options) {-->
<!--    uni.setNavigationBarTitle({-->
<!--      title: options.name-->
<!--    })-->
<!--    this._friendAvatar = options.avatar-->
<!--    this._selfAvatar = '/static/ai.jpg'-->
<!--    this.doctorId = options.doctorId-->
<!--    this.interrogation.doctorId = this.doctorId-->
<!--    this.list = [-->
<!--      {-->
<!--        content: '对方历史回复消息',-->
<!--        userType: 'friend',-->
<!--        avatar: this._friendAvatar-->
<!--      },-->
<!--      {-->
<!--        content: '历史消息',-->
<!--        userType: 'self',-->
<!--        avatar: this._selfAvatar-->
<!--      }-->
<!--    ]-->
<!--  },-->
<!--  created() {-->
<!--    this.getUserInfo();-->
<!--    this.connectToWebSocket();-->
<!--    this.launchInterrogation();-->
<!--  },-->
<!--  methods: {-->
<!--    getUserInfo(){-->
<!--      getInfo().then(res => {-->
<!--        console.log(res.data)-->
<!--        this.user = res.data.user-->
<!--        this.id = res.data.user.userId-->
<!--        console.log("用户编号"+this.id)-->
<!--      })-->
<!--    },-->
<!--    send() {-->
<!--      this.list.push({-->
<!--        content: this.content,-->
<!--        userType: 'self',-->
<!--        avatar: this._selfAvatar-->
<!--      })-->
<!--      this.content = ''-->
<!--      this.scrollToBottom()-->
<!--      // 模拟对方回复-->
<!--      // setTimeout(()=>{-->
<!--      //   this.list.push({-->
<!--      //     content: '周末什么安排',-->
<!--      //     userType: 'friend',-->
<!--      //     avatar: this._friendAvatar-->
<!--      //   })-->
<!--      //   this.scrollToBottom()-->
<!--      // }, 1500)-->
<!--    },-->
<!--    chooseImage() {-->
<!--      uni.chooseImage({-->
<!--        // sourceType: 'album',-->
<!--        success: (res) => {-->
<!--          this.list.push({-->
<!--            content: res.tempFilePaths[0],-->
<!--            userType: 'self',-->
<!--            messageType: 'image',-->
<!--            avatar: this._selfAvatar-->
<!--          })-->
<!--          this.scrollToBottom()-->
<!--          // 模拟对方回复-->
<!--          setTimeout(()=>{-->
<!--            this.list.push({-->
<!--              content: '你好呀，朋友~',-->
<!--              userType: 'friend',-->
<!--              avatar: this._friendAvatar-->
<!--            })-->
<!--            this.scrollToBottom()-->
<!--          }, 1500)-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    scrollToBottom() {-->
<!--      this.top = this.list.length * 1000-->
<!--    },-->
<!--    launchInterrogation() {-->
<!--      this.interrogation.consultantId= this.user.userId-->
<!--      launchInterrogation(this.interrogation).then(res => {-->
<!--        this.interrogationId = res.data;-->

<!--        historyInterrogation(this.interrogationId).then(res => {-->
<!--          console.log("查询到的历史记录:", res.data.medicalConsultationRecordList);-->
<!--          if (res.data != null) {-->
<!--            this.messages = res.data.medicalConsultationRecordList || [];-->
<!--          }-->
<!--        });-->
<!--      });-->
<!--    },-->
<!--    connectToWebSocket() {-->
<!--      const wsUrl = `ws://localhost:10003/imserver/${this.id}`;-->
<!--      this.ws = new WebSocket(wsUrl);-->

<!--      this.ws.onopen = () => {-->
<!--        console.log('WebSocket 连接已打开');-->
<!--        this.isConnected = true;-->
<!--        // 在 WebSocket 连接完全建立后再发送初始化消息-->
<!--        this.sendMessageIfConnected();-->
<!--      };-->

<!--      this.ws.onclose = () => {-->
<!--        console.log('WebSocket 连接已关闭');-->
<!--        this.isConnected = false;-->
<!--      };-->

<!--      this.ws.onerror = (error) => {-->
<!--        console.error('WebSocket 错误', error);-->
<!--        this.isConnected = false;-->
<!--      };-->

<!--      this.ws.onmessage = (event) => {-->
<!--        const message = JSON.parse(event.data);-->
<!--        if (message.content !== undefined) {-->
<!--          console.log("获取到的回调数据:", message);-->
<!--          this.messages.push(message);-->
<!--        } else {-->
<!--          console.warn('接收到的数据无效或格式错误:', event.data);-->
<!--        }-->
<!--      };-->
<!--    },-->
<!--    sendMessage() {-->
<!--      if (this.newMessage.trim() === '') return;-->
<!--      const now = new Date();-->
<!--      const formattedTime = now.toISOString().slice(0, 19).replace('T', ' ');-->
<!--      const message = {-->
<!--        id: Date.now(),-->
<!--        inquiryId: this.interrogationId, //患者医生聊天表编号-->
<!--        sender: this.id,-->
<!--        content: this.newMessage,-->
<!--        sendTime: formattedTime,-->
<!--        to: this.doctorId-->
<!--      };-->
<!--      if (this.isConnected) {-->
<!--        this.messages.push(message);-->
<!--        this.ws.send(JSON.stringify(message));-->
<!--        this.newMessage = '';-->
<!--      } else {-->
<!--        console.warn('WebSocket 连接尚未建立，消息未发送');-->
<!--      }-->
<!--    },-->
<!--    sendMessageIfConnected() {-->
<!--      if (this.isConnected) {-->

<!--        const initialMessage = {-->
<!--          id: Date.now(),-->
<!--          inquiryId: this.interrogationId, //患者医生聊天表编号-->
<!--          sender: this.id,-->
<!--          content: '初始化连接',-->
<!--          sendTime: formattedTime,-->
<!--          to: this.doctorId-->
<!--        };-->

<!--        this.ws.send(JSON.stringify(initialMessage));-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--.scroll-view {-->
<!--  /* #ifdef H5 */-->
<!--  height: calc(100vh - 44px);-->
<!--  /* #endif */-->
<!--  /* #ifndef H5 */-->
<!--  height: 100vh;-->
<!--  /* #endif */-->
<!--  background: #eee;-->
<!--  box-sizing: border-box;-->
<!--}-->
<!--.message {-->
<!--  display: flex;-->
<!--  align-items: flex-start;-->
<!--  margin-bottom: 30rpx;-->

<!--  .avatar {-->
<!--    width: 80rpx;-->
<!--    height: 80rpx;-->
<!--    border-radius: 10rpx;-->
<!--    margin-right: 30rpx;-->
<!--  }-->
<!--  .content {-->
<!--    min-height: 80rpx;-->
<!--    max-width: 60vw;-->
<!--    box-sizing: border-box;-->
<!--    font-size: 28rpx;-->
<!--    line-height: 1.3;-->
<!--    padding: 20rpx;-->
<!--    border-radius: 10rpx;-->
<!--    background: #fff;-->
<!--    image {-->
<!--      width: 200rpx;-->
<!--    }-->
<!--  }-->
<!--  &.self {-->
<!--    justify-content: flex-end;-->
<!--    .avatar {-->
<!--      margin: 0 0 0 30rpx;-->
<!--    }-->
<!--    .content {-->
<!--      position: relative;-->
<!--      &::after {-->
<!--        position: absolute;-->
<!--        content: '';-->
<!--        width: 0;-->
<!--        height: 0;-->
<!--        border: 16rpx solid transparent;-->
<!--        border-left: 16rpx solid #fff;-->
<!--        right: -28rpx;-->
<!--        top: 24rpx;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--  &.friend {-->
<!--    .content {-->
<!--      position: relative;-->
<!--      &::after {-->
<!--        position: absolute;-->
<!--        content: '';-->
<!--        width: 0;-->
<!--        height: 0;-->
<!--        border: 16rpx solid transparent;-->
<!--        border-right: 16rpx solid #fff;-->
<!--        left: -28rpx;-->
<!--        top: 24rpx;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.tool {-->
<!--  position: fixed;-->
<!--  width: 100%;-->
<!--  min-height: 120rpx;-->
<!--  left: 0;-->
<!--  bottom: 0;-->
<!--  background: #fff;-->
<!--  display: flex;-->
<!--  align-items: flex-start;-->
<!--  box-sizing: border-box;-->
<!--  padding: 20rpx 24rpx 20rpx 40rpx;-->
<!--  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)/2) !important;-->
<!--  padding-bottom: calc(20rpx + env(safe-area-inset-bottom)/2) !important;-->
<!--  .input {-->
<!--    background: #eee;-->
<!--    border-radius: 10rpx;-->
<!--    height: 70rpx;-->
<!--    margin-right: 30rpx;-->
<!--    flex: 1;-->
<!--    padding: 0 20rpx;-->
<!--    box-sizing: border-box;-->
<!--    font-size: 28rpx;-->
<!--  }-->
<!--  .thumb {-->
<!--    width: 64rpx;-->
<!--  }-->
<!--}-->
<!--</style>-->



<!--<template>-->
<!--  <view>-->
<!--    <view class="title">-->
<!--      <text>{{ doctorName }}医生</text>-->
<!--    </view>-->
<!--    <scroll-view scroll-y="true" style="height: 700px;">-->
<!--      <view v-for="message in messages" :key="message.id" class="message-container">-->
<!--        <view v-if="message.sender != id" class="message-received">-->
<!--          <text class="message-text">{{ message.content }}</text>-->
<!--        </view>-->
<!--        <view v-else class="message-sent">-->
<!--          <text class="message-text">{{ message.content }}</text>-->
<!--        </view>-->
<!--      </view>-->
<!--    </scroll-view>-->

<!--    <view class="input-container">-->
<!--      <input-->
<!--          type="text"-->
<!--          v-model="newMessage"-->
<!--          placeholder="输入消息"-->
<!--          @keydown.enter.prevent="sendMessage"-->
<!--      />-->
<!--      <button @click="sendMessage">发送</button>-->
<!--    </view>-->

<!--  </view>-->
<!--</template>-->

<!--<script>-->
<!--import {getInfo} from "@/api/login";-->

<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      // interrogation: {-->
<!--      //   id: null,-->
<!--      //   initiatorId: 101,-->
<!--      //   doctor: 1-->
<!--      // },-->
<!--      // messages: [],-->
<!--      // newMessage: '',-->
<!--      // ws: null,-->
<!--      // id: 101,-->
<!--      // isConnected: false,-->
<!--      // interrogationId: null,-->
<!--      interrogation: {-->
<!--        id: null,-->
<!--        consultantId: null,-->
<!--        initiatorId: null,-->
<!--        doctorId: null-->
<!--      },-->
<!--      messages: [],-->
<!--      newMessage: '',-->
<!--      ws: null,-->
<!--      id: null,-->
<!--      isConnected: false,-->
<!--      interrogationId: null,-->
<!--      doctorId: null,-->
<!--      user: {},-->
<!--      doctorName: ''-->


<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    getUserInfo(){-->
<!--      getInfo().then(res => {-->
<!--        console.log(res.data)-->
<!--        this.user = res.data.user-->
<!--        this.id = res.data.user.userId-->
<!--        console.log("用户编号"+this.id)-->
<!--      })-->
<!--    },-->
<!--    launchInterrogation() {-->
<!--      setTimeout(() => {-->
<!--        this.interrogationId = 'some-interrogation-id';-->
<!--        console.log("医生"+this.doctorId)-->
<!--        console.log("患者"+this.id)-->
<!--        this.messages = [-->
<!--          // { sender: this.id, content: '医生，在吗？', gender: this.doctorId },-->
<!--          { sender: this.doctorId, content: '你好，很高兴你可以找我问诊，请问我有什么可以帮助你的吗？', gender: this.id },-->
<!--          // 添加更多模拟消息数据-->
<!--        ];-->
<!--      }, 1000);-->
<!--    },-->
<!--    connectToWebSocket() {-->
<!--      const wsUrl = `ws://localhost:10003/imserver/${this.id}`; //this.id 本人 也就是当前的问诊人-->
<!--      this.ws = new WebSocket(wsUrl);-->

<!--      this.ws.onopen = () => {-->
<!--        console.log('WebSocket 连接已打开');-->
<!--        this.isConnected = true;-->
<!--      };-->

<!--      this.ws.onclose = () => {-->
<!--        console.log('WebSocket 连接已关闭');-->
<!--        this.isConnected = false;-->
<!--      };-->

<!--      this.ws.onerror = (error) => {-->
<!--        console.error('WebSocket 错误', error);-->
<!--        this.isConnected = false;-->
<!--      };-->

<!--      this.ws.onmessage = (event) => {-->
<!--        const message = JSON.parse(event.data);-->
<!--        if (message.content !== undefined) {-->
<!--          this.messages.push(message);-->
<!--          this.$refs.scrollView.scrollTop = this.$refs.scrollView.scrollHeight; // 滚动到底部-->
<!--        } else {-->
<!--          console.warn('接收到的数据无效或格式错误:', event.data);-->
<!--        }-->
<!--      };-->
<!--    },-->
<!--    sendMessage() {-->
<!--      if (this.newMessage.trim() === '') return;-->
<!--      const now = new Date();-->
<!--      const formattedTime = now.toISOString().slice(0, 19).replace('T', ' ');-->
<!--      const message = {-->
<!--        // interrogationId: this.interrogationId,-->
<!--        // id: Date.now(),-->
<!--        // content: this.newMessage,-->
<!--        // createTime: formattedTime,-->
<!--        // initiatorId: this.id,-->
<!--        // to: '1',-->
<!--        id: Date.now(),-->
<!--        inquiryId: this.interrogationId, //患者医生聊天表编号-->
<!--        sender: this.id,-->
<!--        content: this.newMessage,-->
<!--        sendTime: formattedTime,-->
<!--        to: this.doctorId-->
<!--      };-->
<!--      if (this.isConnected) {-->
<!--        this.messages.push(message);-->
<!--        this.ws.send(JSON.stringify(message));-->
<!--        this.newMessage = '';-->
<!--        this.$refs.scrollView.scrollTop = this.$refs.scrollView.scrollHeight; // 滚动到底部-->
<!--      } else {-->
<!--        console.warn('WebSocket 连接尚未建立，消息未发送');-->
<!--      }-->
<!--    },-->
<!--  },-->
<!--  onLoad(options) {-->
<!--    this.doctorId = options.doctorId-->
<!--    this.doctorName = options.doctorName-->
<!--    this.interrogation.doctorId = this.doctorId-->
<!--    this.getUserInfo()-->
<!--    this.connectToWebSocket();-->
<!--    this.launchInterrogation();-->
<!--  },-->
<!--  onUnload() {-->
<!--    if (this.ws && this.ws.readyState === WebSocket.OPEN) {-->
<!--      this.ws.close();-->
<!--    }-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.container {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: center;-->
<!--  justify-content: space-between;-->
<!--  height: 100vh; /* 使容器高度充满整个视口 */-->
<!--  padding: 100px;-->
<!--  height: 400px; /* 直接设置按钮的高度 */-->
<!--  box-sizing: border-box;-->
<!--}-->

<!--.title {-->
<!--  text-align: center;-->
<!--  margin-bottom: 20px;-->
<!--}-->

<!--.message-list {-->
<!--  flex: 1; /* 使消息列表占据剩余空间 */-->
<!--  overflow-y: auto; /* 允许垂直滚动 */-->
<!--  padding: 0 10px; /* 为消息列表添加一些内边距 */-->
<!--  box-sizing: border-box;-->
<!--}-->

<!--.message-container {-->
<!--  display: flex;-->
<!--  align-items: flex-start;-->
<!--  margin-bottom: 15px;-->
<!--}-->

<!--.message-received {-->
<!--  margin-right: auto;-->
<!--  background-color: #e0e0e0;-->
<!--  border-radius: 12px;-->
<!--  padding: 12px;-->
<!--  max-width: 100%;-->
<!--  word-wrap: break-word;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);-->
<!--}-->

<!--.message-sent {-->
<!--  margin-left: auto;-->
<!--  background-color: #00bfff;-->
<!--  color: white; /* 添加文字颜色 */-->
<!--  border-radius: 12px;-->
<!--  padding: 12px;-->
<!--  max-width: 70%;-->
<!--  word-wrap: break-word;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: flex-end;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);-->
<!--}-->

<!--.message-text {-->
<!--  font-size: 12px; /* 调整字体大小 */-->
<!--}-->

<!--.time {-->
<!--  font-size: 12px;-->
<!--  color: #999;-->
<!--  margin-top: 5px;-->
<!--}-->

<!--.input-container {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  width: 100%; /* 使输入框容器宽度充满父元素 */-->
<!--  box-sizing: border-box;-->
<!--  padding: 10px;-->
<!--  background-color: white; /* 添加背景颜色 */-->
<!--  border-top: 1px solid #ddd; /* 添加顶部边框 */-->
<!--  position: fixed; /* 固定输入框位置 */-->
<!--  bottom: 0; /* 放置在页面底部 */-->
<!--  left: 0;-->
<!--  right: 0;-->
<!--}-->

<!--input {-->
<!--  flex: 10;-->
<!--  border: 1px solid #ccc; /* 非常大的边框，通常不推荐 */-->
<!--  border-radius: 50px;-->
<!--  padding: 10px; /* 非常大的内边距，通常不推荐 */-->
<!--  font-size: 16px; /* 调整输入框字体大小 */-->
<!--  height: 40px; /* 这个设置被边框和内边距覆盖，实际上不起作用 */-->
<!--  margin-top: -100px; /* 使用负外边距将输入框向上移动 */-->
<!--  box-sizing: border-box; /* 确保padding和border不会增加元素的总宽度和高度 */-->
<!--}-->

<!--button {-->
<!--  border: none;-->
<!--  background-color: #007aff;-->
<!--  color: white;-->
<!--  padding: 1px 2px;-->
<!--  border-radius: 5px;-->
<!--  font-size: 16px; /* 调整按钮字体大小 */-->
<!--  height: 40px; /* 直接设置按钮的高度 */-->
<!--  margin-top: -100px;-->
<!--}-->
<!--</style>-->

<template>
  <view>
    <view class="title">
      <text>{{ doctorName }}医生</text>
    </view>
    <scroll-view scroll-y="true" style="height: 700px;">
      <view v-for="message in messages" :key="message.id" class="message-container">
        <view v-if="message.initiatorId != id" class="message-received">
          <text class="message-text">{{ message.content }}</text>
        </view>
        <view v-else class="message-sent">
          <text class="message-text">{{ message.content }}</text>
          <text class="message-text">{{ message.createTime }}</text>
        </view>
      </view>
    </scroll-view>

    <view class="input-container">
      <input
          type="text"
          v-model="newMessage"
          placeholder="输入消息"
          @keydown.enter.prevent="sendMessage"
      />
      <button @click="sendMessage">发送</button>
    </view>

  </view>
</template>

<script>
import {historyInterrogation, launchInterrogation} from "@/api/websocket/websocket";
import {getInfo} from "@/api/login";
export default {
  data() {
    return {
      interrogation: {
        id: null,
        initiatorId: 101,
        doctor: 1
      },
      messages: [],
      newMessage: '',
      ws: null,
      id: 101,
      isConnected: false,
      interrogationId: null,
      doctorName: '',

    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo(){
      getInfo().then(res => {
        console.log(res.data)
        this.user = res.data.user
        // this.id = res.data.user.userId
        console.log("用户编号"+this.id)
      })
    },



    launchInterrogation() {

    //根据患者诊断记录表ID 获取 患者医生聊天记录表ID，根据患者医生聊天记录表ID获取聊天记录
      launchInterrogation(this.interrogation).then(res => {
        this.interrogationId = res.data;
        historyInterrogation(this.interrogationId).then(res => {
          console.log("查询到的历史记录:", res.data.medicalConsultationRecordList);
          if (res.data != null) {
            this.messages = res.data.medicalConsultationRecordList || [];
          }
        });
      });

    },
    connectToWebSocket() {
      const wsUrl = `ws://localhost:10003/imserver/${this.id}`;
      this.ws = new WebSocket(wsUrl);

      this.ws.onopen = () => {
        console.log('WebSocket 连接已打开');
        this.isConnected = true;
      };

      this.ws.onclose = () => {
        console.log('WebSocket 连接已关闭');
        this.isConnected = false;
      };

      this.ws.onerror = (error) => {
        console.error('WebSocket 错误', error);
        this.isConnected = false;
      };

      this.ws.onmessage = (event) => {
        const message = JSON.parse(event.data);
        if (message.content !== undefined) {
          this.messages.push(message);
          this.$refs.scrollView.scrollTop = this.$refs.scrollView.scrollHeight; // 滚动到底部
        } else {
          console.warn('接收到的数据无效或格式错误:', event.data);
        }
      };
    },
    sendMessage() {
      if (this.newMessage.trim() === '') return;
      const now = new Date();
      const formattedTime = now.toISOString().slice(0, 19).replace('T', ' ');
      const message = {
        interrogationId: this.interrogationId,
        id: Date.now(),
        content: this.newMessage,
        createTime: formattedTime,
        initiatorId: 101,
        // initiatorId: this.id,
        to: 1,
      };
      if (this.isConnected) {
        this.messages.push(message);
        this.ws.send(JSON.stringify(message));
        this.newMessage = '';
        this.$refs.scrollView.scrollTop = this.$refs.scrollView.scrollHeight; // 滚动到底部
      } else {
        console.warn('WebSocket 连接尚未建立，消息未发送');
      }
    },
  },
  onLoad(options) {
    this.connectToWebSocket();
    this.launchInterrogation();
    this.doctorName = options.doctorName
  },
  onUnload() {
    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
      this.ws.close();
    }
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh; /* 使容器高度充满整个视口 */
  padding: 100px;
  height: 400px; /* 直接设置按钮的高度 */
  box-sizing: border-box;
}

.title {
  text-align: center;
  margin-bottom: 20px;
}

.message-list {
  flex: 1; /* 使消息列表占据剩余空间 */
  overflow-y: auto; /* 允许垂直滚动 */
  padding: 0 10px; /* 为消息列表添加一些内边距 */
  box-sizing: border-box;
}

.message-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.message-received {
  margin-right: auto;
  background-color: #e0e0e0;
  border-radius: 12px;
  padding: 12px;
  max-width: 100%;
  word-wrap: break-word;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.message-sent {
  margin-left: auto;
  background-color: #00bfff;
  color: white; /* 添加文字颜色 */
  border-radius: 12px;
  padding: 12px;
  max-width: 70%;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.message-text {
  font-size: 12px; /* 调整字体大小 */
}

.time {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.input-container {
  display: flex;
  justify-content: space-between;
  width: 100%; /* 使输入框容器宽度充满父元素 */
  box-sizing: border-box;
  padding: 10px;
  background-color: white; /* 添加背景颜色 */
  border-top: 1px solid #ddd; /* 添加顶部边框 */
  position: fixed; /* 固定输入框位置 */
  bottom: 0; /* 放置在页面底部 */
  left: 0;
  right: 0;
}

input {
  flex: 10;
  border: 1px solid #ccc; /* 非常大的边框，通常不推荐 */
  border-radius: 50px;
  padding: 10px; /* 非常大的内边距，通常不推荐 */
  font-size: 16px; /* 调整输入框字体大小 */
  height: 40px; /* 这个设置被边框和内边距覆盖，实际上不起作用 */
  margin-top: -100px; /* 使用负外边距将输入框向上移动 */
  box-sizing: border-box; /* 确保padding和border不会增加元素的总宽度和高度 */
}

button {
  border: none;
  background-color: #007aff;
  color: white;
  padding: 1px 2px;
  border-radius: 5px;
  font-size: 16px; /* 调整按钮字体大小 */
  height: 40px; /* 直接设置按钮的高度 */
  margin-top: -100px;
}

</style>
